import React, { useEffect, useState, useRef } from 'react';
// import { pdfjs, Document, Page } from 'react-pdf/dist/esm/entry.webpack5'; //react-pdf

// import 'pdfjs-dist/legacy/build/pdf.worker.entry.js';
// import pdfjsWorker from 'pdfjs-dist/legacy/build/pdf.worker';
// import * as pdfjsLib from 'pdfjs-dist/legacy/build/pdf';

import './index.less';
// pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
// pdfjs.GlobalWorkerOptions.workerSrc = 'https://ossworkerweb.jxsrnmg.com/worker_supervision_oa/pdf/legacy/build/pdf.worker.min.js';

interface PDFJSViewerProps {
  file: any;
  chiledStyle?: any;
}

const PDFJSMobeilViewer: React.FC<PDFJSViewerProps> = ({ file, chiledStyle }) => {
  const [loading, setLoading] = useState(true);
  const [rendering, setRendering] = useState(false);
  const pdfRef = useRef(null);
  const [fileData, setFileData] = useState<any>();
  const [pageNumber, setPageNumber] = useState(1);

  // const renderPdf = (pdf) => {
  //   const {
  //     _pdfInfo: { numPages },
  //   } = pdf;
  //   const pdfDoc = pdf;
  //   const fragment = document.createDocumentFragment();
  //   for (let i = 1; i <= numPages; i++) {
  //     // 因为不知道把pdf解析了多少页，所以我们需要循环创建canvas并且一定要不同的id
  //     const canvas = document.createElement('canvas');
  //     canvas.id = `pdf${i}`;
  //     const canvasContext = canvas.getContext('2d'); // 通过getPage的方法获取到每一页的内容渲染，结束后把当前创建的canvas添加到页面中
  //     pdfDoc.getPage(i).then((page) => {
  //       //逐页解析PDF
  //       const viewport = page.getViewport({ scale: 0.9 }); // 页面缩放比例，值越大越清晰
  //       canvas.height = viewport.height;
  //       canvas.width = viewport.width;
  //       canvasContext.clearRect(0, 0, canvas.width, canvas.height);
  //       const renderContext = {
  //         canvasContext: canvasContext,
  //         viewport: viewport,
  //         rotate: 90,
  //       };
  //       page.render(renderContext);
  //     });
  //     fragment.appendChild(canvas);
  //   } // 获取到页面定义好的父元素，把生成的canvas添加进去
  //   document.getElementById('pdf').appendChild(fragment);
  // };

  // const start = async () => {
  //   setLoading(true);
  //   let pdfDoc;
  //   try {
  //     pdfDoc = await pdfjsLib.getDocument(file).promise;
  //   } catch (error) {
  //     // 某些浏览器内核不支持 Fetch - response.body.getReader 的模式，专门在这里修复
  //     if (String(error).indexOf('body.getReader') > -1) {
  //       const pdfData = await fetch(new URL(file));
  //       const arrayBufferPdf = await pdfData.arrayBuffer(); //  // 转成 ArrayBuffer 塞给 pdf.js
  //       pdfDoc = await pdfjsLib.getDocument({ data: arrayBufferPdf }).promise;
  //     } else {
  //       const fileUrl = 'https://ossworkerweb.jxsrnmg.com/worker_supervision_oa/compatiblePDF/web/viewer.html?file=' + encodeURIComponent(file);
  //       setFileData(fileUrl);
  //     }

  //     // else if (String(error).indexOf('WorkerMessageHandler') > -1) {
  //     //   pdfjs.GlobalWorkerOptions.workerSrc =
  //     //     'https://ossworkerweb.jxsrnmg.com/worker_supervision_oa/pdf/legacy/build/pdf.worker.min.js';
  //     //   const arrayBufferPdf = await pdfData.arrayBuffer();
  //     //   pdfDoc = await pdfjs.getDocument({ data: arrayBufferPdf }).promise;
  //     // }
  //   }
  //   pdfRef.current = pdfDoc;
  //   if (pdfDoc) {
  //     renderPdf(pdfDoc);
  //     // init(pdfDoc);
  //   }
  //   setLoading(false);
  // };

  useEffect(() => {
    // start();
  }, []);

  const onDocumentLoadSuccess = ({ numPages }) => {
    setPageNumber(numPages);
  };

  const onDocumentLoadError = (error) => {
    console.log(error);
  }

  return (
    <div className="pdfStyle" style={chiledStyle}>
      <div id="pdf" ref={pdfRef} className="pdfDiv" />
      {/* <Document
        file={file}
        onLoadSuccess={onDocumentLoadSuccess}
        onLoadError={onDocumentLoadError}
        options={{
          workerSrc:
            'https://ossworkerweb.jxsrnmg.com/worker_supervision_oa/pdf/legacy/build/pdf.worker.min.js',
          cMapUrl: 'https://ossworkerweb.jxsrnmg.com/worker_supervision_oa/pdf/cmaps/',
          cMapPacked: true
        }}
      >
        <Page scale={1} pageNumber={pageNumber} />
      </Document> */}
      <iframe
        style={{ width: '100%', height: '100%' }}
        src={
          'https://ossworkerweb.jxsrnmg.com/worker_supervision_oa/compatiblePDF/web/viewer.html?file=' +
          encodeURIComponent(file)
        }
      />
      {fileData && (
        <a
          onClick={() => {
            window.open(fileData, '__blank');
          }}
        >
          点击查看
        </a>
      )}
    </div>
  );
};

export default PDFJSMobeilViewer;
